<!DOCTYPE html>
<html>
<head>
    <title>View transitions</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.mobile.all.min.css" rel="stylesheet" />
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div data-role="view" data-title="Camera App" id="view-transitions" data-persist="true">
    <img src="../content/mobile/shared/color-lens.png" class="camera-image" /><br />
    <a href="#view-transitions-login" data-role="button" class="transitions-button">Login/Sign-up</a>
</div>

<div data-role="view" data-title="Login/Sign-up" id="view-transitions-login" data-transition="overlay:up" data-persist="true">
    <ul data-role="listview" data-style="inset">
        <li><label for="username">Username: <input type="text" id="username" /></label></li>
        <li><label for="password">Password: <input type="password" id="password" /></label></li>
    </ul>

    <a href="#view-transitions-welcome" data-transition="overlay:down reverse" data-role="button" class="transitions-button">Login</a><br />
    <a href="#view-transitions" data-transition="overlay:up reverse" data-role="button" class="transitions-cancel">Cancel</a>
</div>

<div data-role="view" data-title="Welcome" id="view-transitions-welcome" data-persist="true">
    <img src="../content/mobile/modalview/lens.png" class="camera-image" /><br />
    <a data-role="button" href="#view-transitions" data-transition="slide:right" class="transitions-button">Sign out</a>
</div>


<style scoped>
    .km-root .transitions-button,
    .km-root .transitions-cancel {
        display: block;
        text-align: center;
        margin: .6em .8em 0;
        font-size: 1.2em;
        background-color: #369;
    }

    .km-ios7 .transitions-button,
    .km-ios7 .transitions-cancel {
        color: #fff;
        border-color: transparent;
    }

    .km-blackberry .transitions-button,
    .km-blackberry .transitions-cancel {
        margin: .6em 1.8em 0;
    }

    #view-transitions,
    #view-transitions-welcome p {
    	color: #fff;
        text-align: center;
    }

    #view-transitions img,
    #view-transitions-welcome img {
        display: block;
        margin: 30px auto;
    }

    #view-transitions-login label {
        display: inline-block;
	width: 100%;
    }
    #view-transitions .km-content,
    #view-transitions-login .km-content,
    #view-transitions-welcome .km-content {
        background: url(../content/shared/images/patterns/pattern1.png) repeat 0 0;
    }

    .km-ios #view-transitions-welcome .km-button,
    .km-ios7 #view-transitions-welcome .km-content .km-button,
    .km-blackberry #view-transitions-welcome .km-content .km-button,
    .km-flat #view-transitions-welcome .km-content .km-button {
        background-color: DarkRed;
	color: #fff;
    }

    .km-ios #view-transitions-login .transitions-button,
    .km-ios7 #view-transitions-login .transitions-button,
    .km-blackberry #view-transitions-login .km-content .transitions-button,
    .km-flat #view-transitions-login .km-content .transitions-button {
        background-color: Green;
	color: #fff;
    }

    .km-blackberry #view-transitions *,
    .km-blackberry #view-transitions-login *,
    .km-blackberry #view-transitions-welcome *
    {
        color: #fff;
    }

    .km-ios #view-transitions .km-button,
    .km-ios7 #view-transitions .km-button,
    .km-ios #view-transitions-login .transitions-cancel,
    .km-ios7 #view-transitions-login .transitions-cancel {
        background-color: #000;
    }

    .km-flat #view-transitions .km-button,
    .km-flat #view-transitions-login .km-content .transitions-cancel {
        background-color: #000;
    	color: #fff;
    }

    .km-ios #view-transitions .km-navbar,
    .km-ios #view-transitions-login .km-navbar,
    .km-ios #view-transitions-welcome .km-navbar,
    .km-ios7 #view-transitions .km-navbar,
    .km-ios7 #view-transitions-login .km-navbar,
    .km-ios7 #view-transitions-welcome .km-navbar,
    .km-ios7 .km-view-title,
    .km-blackberry #view-transitions .km-navbar,
    .km-blackberry #view-transitions-login .km-navbar,
    .km-blackberry #view-transitions-welcome .km-navbar,
    .km-flat #view-transitions .km-navbar,
    .km-flat #view-transitions-login .km-navbar,
    .km-flat #view-transitions-welcome .km-navbar {
        background-color: #000;
	color: #fff;
    }

    .km-ios7 #view-transitions .km-navbar,
    .km-ios7 #view-transitions-login .km-navbar,
    .km-ios7 #view-transitions-welcome .km-navbar {
        border-color: transparent;
    }

    .km-ios7 #view-transitions-login  .km-list > li,
    .km-ios7 #view-transitions-login  .km-list > li input,
    .km-android-light #view-transitions-login  .km-list > li,
    .km-wp-light #view-transitions-login  .km-list > li {
	color: #fff;
    }
    .km-wp-light #view-transitions .km-view-title {
    	color: #000;
    }
</style>


    
    <script>
        window.kendoMobileApplication = new kendo.mobile.Application(document.body);
    </script>
    
    
</body>
</html>
